<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>
<script type="text/javascript">
$(document).ready(function(){
	
	$("#dialogo").dialog({
		autoOpen: false,
                    title: "Formulario Tipo de Composicion",
		height: 250,
		width: 550,
		modal: true,
		buttons: {
                        "Aceptar": function() {
                            var flag = $("#formTipoDeComposicion").valid();
                            if(flag){
                                $.ajax({
                                    type: 'POST',
                                    url: 'addEditTypeOfComposition',
                                    data: $('#formTipoDeComposicion').serialize(),
                                    success: function(res){
                                    	location.href = "compositionType?_menuId=1&_subMenuId=1&_optionId=2";
                                    },
                                    error:function(){alert("Error! al registrar el Tipo de Composicion")}
                                });
                                $( this ).dialog( "close" );
                            }
                        },
                        Cancelar: function() {
                            $( this ).dialog( "close" );
                        }
		},
		close: function() {
                        // implementar lo que convenga
		}
	});
	
	
	
	
	// funcion que añade un tipo de composicion
    $.fn.addTipoComposicion = function(){
         // primero reseteamos :)
         $('#formTipoDeComposicion').each(function(){
             this.reset();
         });
        
         $("#titleForm").text("Nuevo Tipo de Composición");
         $("#accion").val("0");
         $("#dialog:ui-dialog" ).dialog( "destroy" );
         $("#dialogo" ).dialog( "open" );
         $("#name").focus();
    }
    
    // funcion que modifica un tipo de composicion
     $.fn.editarTipoComposicion = function(typeCompositionId,name){
         $("#titleForm").text("Modificar Tipo de Composición");
         $('#formTipoDeComposicion').each(function(){
             this.reset();
         });        
         $("#accion").val("1");
         $("#typeCompositionId").val(typeCompositionId);
         $("#name").val(name);
         $("#dialog:ui-dialog" ).dialog( "destroy" );
         $("#dialogo").dialog("open");
         $("#nombre").focus();
     }
    
     // funcion que elimina un tipo de composicion
     $.fn.eliminarTipoComposicion = function(typeCompositionId,name){     
         
         if(confirm("¿Esta seguro de eliminar el Tipo de Composición ''"+name+"''?")){
             $.ajax({
                 url: "removeTypeOfComposition",
                 type: "GET",
                 data:{typeCompositionId:typeCompositionId, name:name},
                 success:function(res){
                	 location.href = "compositionType?_menuId=1&_subMenuId=1&_optionId=2";
                 },
                 error: function(res){ alert("Error! al eliminar el tipo de composición."); }
             });
         }
     }
     
   //permit only text
	$('.lettersOnly').keyup(function () {
	   if (this.value != this.value.replace(/[^A-Za-z\s]/g, '')) {
	       this.value = this.value.replace(/[^A-Za-z\s]/g, '');
	   }
	});
	
	
});

	 
</script>
</head>

<body>
	  <div id="top-wrap">
            <!-- cabeza principal -->
            <%@include file="../../../head.jsp" %>
            
            <!-- cuerpo -->
            <div id="bodySpace">               
                <!-- aqui va la ruta -->
                <div class="clearfix" id="middle" style="position: absolute">
                    <!-- aqui va el arbol de entrada -->
                    <div id="breadcrumb"><!-- le da la forma de la imagen -->
                        <ul>
                        <li><a href="mainFront?v=1">Home</a></li>
                        <li><span style="color:#666">Configuraci&oacute;n</span></li>
                        <li><span style="color:#666">Productos/Principio Activo</span></li>
                        <li class="current-page"><span class="end"><span class="middle">Tipo de Composici&oacute;n</span></span></li>
                        </ul>
                        <!-- para la hora -->
                        <!--<div style="clear: both;position: absolute;text-align: right;width: 100%;"><span id="fechaServ"></span>&nbsp;&nbsp;<span id="horaServ" style=""></span>&nbsp;</div>-->
                    </div><!-- begin SIDEBAR FIRST -->
                </div>
                
                <div id="principal">
                    <!-- izquierda -->
                    <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                        <div class="izq">
                            <%@include file="../../../bodyIzq.jsp"%>
                        </div>
                        	
                        <div class="medio" style="border: 0px solid"><br/>                     
                            <center>
                            <div id="listCiudades">
                            <h2 class="decorado">Lista de Tipos de Composici&oacute;n </h2>
                            <table class="miReporte" style="width: 80%">
                                <tr>
                                	
                                    <td style="text-align: right"><input type="button" class="boton" value="Añadir Tipo de Composicion" onclick="$.fn.addTipoComposicion()"/></td>
                                </tr>
                            </table>
                            <table class="tabla_decorado" style="width: 80%">
                                <thead>
                                    <tr><!--  -->
                                        <th width="5%" class="th_decoradoRowspan">Nº</th>
                                        <th width="40%" class="th_decoradoRowspan">NOMBRE</th>
                                        <th width="30%" class="th_decoradoRowspan">ACCIONES</th>
                                    </tr>
                                </thead>
                                <tbody>
                            		<c:set var="i" value="1"/>
									<c:forEach var="item" items="${typeComposition}"> 
	                                    <tr class="tr_decorado">
	                                        <td class="th_decorado" style="text-align: center">${i}</td>
	                                        <td class="th_decorado">${item.name}</td>
	                                        <td class="td_decoradoDerecha" style="text-align: center">
	                                            <input type="button" value="Editar" onclick="$.fn.editarTipoComposicion(${item.typeCompositionId},'${item.name}')" class="botonRep" title="Pulsa aqui para editar la ciudad"/>	                          
	                                            <input type="button" value="Eliminar" onClick="$.fn.eliminarTipoComposicion(${item.typeCompositionId},'${item.name}')" class="botonRep" title="Pulsa aqui para eliminar la ciudad"/>
	                                        </td>
	                                    </tr>                           				
	                                    <c:set var="i" value="${i+1}"/>
					        		</c:forEach>
                                </tbody>
                            </table>
                           
                            </div> <!-- End pais id='paisBaja' -->
                            
                            </div> <!-- End id="listPais" -->
                                
                            <div id="dialogo"><br/>
                                <h2 class="decorado" id="titleForm"></h2><br/>
                                <form id="formTipoDeComposicion" method="POST">
                                    <input type="hidden" name="accion" id="accion" value="0" />
                                    <input type="hidden" name="typeCompositionId" id="typeCompositionId" value="0" />
                                    
                                    <div style="clear:both;">
                                        <label class="form_align35" >Nombre : </label>
                                        <input type="text" name="name" id="name" value="" class="required form_input_align lettersOnly" title="Ingrese Nombre de Tipo de Composición" maxlength="40" placeholder="letras"/>
                                        <label class="error">*</label>
                                    </div>
                                    
                                </form>
                            </div> <!-- FIN DIV id="dialogo" -->  
                            </center>
                        </div>
                    </div><!--end of leftPan-->
                    
                    <div class="yDer" style="border: 1px solid #ccc;"> <%@include file="../../../notices.jsp" %> </div><!--end of rightPan-->
                </div><!--end of content-wrapper-->
            </div><!--end of body-wrap-->
        </div>
</body>
</html>
